import React, { useEffect, useState } from 'react'
import { Table, Button, Modal,Tree } from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import {getRoles,updateRoles,deleteRoles,getRights} from "../../../api/api"

export default function RoleList() {
  const [dataSource, setDataSource] = useState([]);
  const [rightList,setrightList]=useState([])
  const [currentRights,setcurrentRights]=useState([])
  const [currentId,setcurrentId]=useState(0)
  const [isModalVisible, setIsModalVisible] = useState(false)
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />
            <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => {
              // console.log(item);
              setIsModalVisible(true)
              setcurrentRights(item.rights)
              setcurrentId(item.id)
            }} />
          </div>
        )
      }
    },
  ]
  useEffect(() => {
    const httpRequest=async ()=>{
      //获取角色列表信息
      const res=await getRoles()
      setDataSource(res.data.data)
    }
    httpRequest()
  }, [])
  useEffect(()=>{
    const httpRequest=async ()=>{
      //获取权限列表信息
      const res=await getRights()
      setrightList(res.data.data)
    }
    httpRequest()
  },[])
  const confirmMethod = (item) => {
    Modal.confirm({
      title: '你确定要删除？',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        deleteMethod(item)
      }
    });
  }
  const deleteMethod = (item) => {
    // console.log(item);
    setDataSource(dataSource.filter(data => data.id !== item.id))
    //删除角色信息
    deleteRoles({
      id:item.id
    })
  }
  const handleOk = () => {
    setIsModalVisible(false);
    setDataSource(dataSource.map(item=>{
      console.log(item);
      if(item.id===currentId){
        return {
          ...item,
          rights:currentRights
        }
      }
      return item
    }))
    //修改角色权限
    updateRoles({
      id:currentId,
      rights:currentRights
    })
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onCheck=(checkedKeys)=>{
    // console.log(checkedKeys);
    setcurrentRights(checkedKeys)
  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} pagination={{
        pageSize: 5,
        pageSizeOptions:[]
      }} />
      <Modal title="权限分配" okText="确认" cancelText="取消" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Tree
          checkable
          checkedKeys={currentRights}
          onCheck={onCheck}
          treeData={rightList}
        />
      </Modal>
    </div>
  )
}
